<link rel="stylesheet" href="{{URL::asset('./css/news/news.css')}}">


@extends('home.layout.base')
@section('content')
<div class="main">
    <div>
        <div id="news_swiper" class="newsSwiper" v-if="swiperData">
            <!-- <div id="news_swiper" class="carousel slide"  data-interval="5000">
                <ol class="carousel-indicators">
                    <li data-target="#news_swiper" v-for="(item,index) in swiperData" :data-slide-to="index" :class="{active:index==0}"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item" :class="{active:index==0}" v-for="(item,index) in swiperData">
                        <a :href="item.link">
                            <img :src="item.thumb" alt="..."></a>
                    </div>
                </div>
            </div> -->
            <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in swiperData">
                    {{--<a :href="item.link" style="display:block;width:100%;height:100%">--}}
                        {{--<img :src="item.thumb" alt="..." style="width:100%;height:100%">--}}
                    {{--</a>--}}
                    <a v-if="item.target!=2" :href="item.link" target="_blank" style="display:block;width:100%;height:100%">
                        <img :src="item.thumb" alt="..." style="width:100%;height:100%">
                    </a>
                    <a v-else :href="item.link" style="display:block;width:100%;height:100%">
                        <img :src="item.thumb" alt="..." style="width:100%;height:100%">
                    </a>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        </div>
        <div class="newsMain">
            <div class="newsBreadcrumb">
                <span>当前位置：</span>
                <span><a href="{{route('home.index.index') }}">首页</a> > 所有新闻资讯</span>
            </div>
            <div class="newsContent" v-loading="loading2">
                <div id="newsHeader"  v-cloak>
                    <div class="newsHeader">
                        <div :class="{active:newsHeaderActive==0}" @click="handleActive(0)">
                            <span>发布时间</span>
                            <span class="newsBy">
                                <i class="newsasc" :class="{active:orderbyStr=='asc'}" @click.stop="orderBy(0,'asc')"></i>
                                <i class="newsdesc" :class="{active:orderbyStr=='desc'}" @click.stop="orderBy(0,'desc')"></i>
                            </span>
                        </div>
                        <div :class="{active:newsHeaderActive==1}" @click="handleActive(1)">
                            <span>浏览量</span>
                            <span class="newsBy">
                                <i class="newsasc" :class="{active:orderbyStr=='asc'}" @click.stop="orderBy(1,'asc')"></i>
                                <i class="newsdesc" :class="{active:orderbyStr=='desc'}" @click.stop="orderBy(1,'desc')"></i>
                            </span>
                        </div>
                        <div :class="{active:newsHeaderActive==2}" @click="handleActive(2)">
                            <span>收藏量</span>
                            <span class="newsBy">
                                <i class="newsasc" :class="{active:orderbyStr=='asc'}" @click.stop="orderBy(2,'asc')"></i>
                                <i class="newsdesc" :class="{active:orderbyStr=='desc'}" @click.stop="orderBy(2,'desc')"></i>
                            </span>
                        </div>
                    </div>
                    <div class="newsMessage">
                        <div v-for="(item,index) in newsList.data" @click="getDetails(item.id)">
                            <img :src="item.thumb" alt="">
                            <div>
                                <p class="newsMessage_title">@{{item.title}}</p>
                                <div class="msgBox">
                                    <p>发布时间 @{{item.created_at}}</p>
                                    <p>收藏  @{{item.collect}}</p>
                                    <p>浏览  @{{item.view}}</p>
                                </div>
                                <p class="newsMessage_content" v-html="item.content"></p>
                                <div class="boxBtn">新闻详情</div>
                                <!-- <div class="newsMessage_mess">
                                    <span><img src="{{URL::asset('./img/news/collect.png')}}" alt="">@{{item.collect}}</span>
                                    <span><img src="{{URL::asset('./img/news/eye.png')}}" alt="">@{{item.view}}</span>
                                    <span><img src="{{URL::asset('./img/news/time.png')}}" alt="">@{{item.created_at}}</span>
                                </div> -->
                            </div>
                        </div>
                    </div>
                    <div class="elementPage" v-if="newsList.total">
                        <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="newsList.total">
                        </el-pagination>

                    </div>
                </div>
                @include('home.news.newsHot')
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let news_swiper = new Vue({
            el: '#news_swiper',
            data: () => {
                return {
                    swiperData: [],

                }
            },
            created() {
                let data = {
                    adsense_id: 8
                }
                apiAjax("{{ route('home.public.advs')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.swiperData = res.data;
                        // $('.carousel').carousel('cycle')
                        this.$nextTick(()=>{
                            var swiper = new Swiper('.swiper-container', {
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable: true,
                                },
                                loop: true,
                                autoplay:true,
                                autoplayDisableOnInteraction : false,
                            });
                        })
                    } else {}
                }, (erro) => {});
            },
            mounted() {},
            methods: {}
        })


        let newsHeader = new Vue({
            el: '#newsHeader',
            data: () => {
                return {
                    newsHeaderActive: 0,
                    orderbyStr: "desc",
                    pageNumber: 1,
                    loading2: false,
                    newsList: {},
                }
            },
            created() {

                this.getList(this.newsHeaderActive, this.orderbyStr)

            },
            mounted() {},
            methods: {
                orderBy(index, str) {
                    if (this.newsHeaderActive != index) {
                        this.newsHeaderActive = index;
                    }
                    this.orderbyStr = str;
                    this.getList(this.newsHeaderActive, this.orderbyStr);
                },
                handleActive(index) {
                    this.newsHeaderActive = index;
                    this.orderbyStr = 'desc';
                    this.getList(this.newsHeaderActive, this.orderbyStr)
                },
                getList(type, orderby) {
                    this.loading2 = true;
                    let data = {
                        type: type,
                        orderby: orderby,
                        page: this.pageNumber,
                        keyword: getQueryString("keyword") || ''
                    };
                    apiAjax("{{ route('home.news.newsList')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.newsList = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                        this.loading2 = false;
                    }, (erro) => {
                        this.loading2 = false;
                    });
                },
                getDetails(id) {
                    window.location.href = `{{ route('home.news.newsDetails') }}?id=${id}`;
                },
                handleCurrentChange(val) {
                    this.pageNumber = val;
                    this.getList(this.newsHeaderActive, this.orderbyStr)
                }
            }
        })
    })
</script>
@endsection